<style media="screen">
	.isStyleCommis {
		background: #f1f1f1;
	}

	.bill-due-to {
		display: flex;
		align-items: center;
	}

	.icon-GM-bill {
		width: 32px;
		height: 32px;
		border-radius: 50%;
		background: #EA733D;
		margin-right: 10px;
		color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;

	}

	.init-hover:hover .init-tips {
		display: block;
	}

	.init-tips {
		display: none;
		width: 240px;
		position: absolute;
		left: 50%;
		top: 28px;
		background: #fff;
		filter: drop-shadow(0 0 5px rgba(0, 0, 0, .2));
		transform: translate(-50%, 0);
		padding: 10px;
		border-radius: 4px;
	}

	.init-tips:before {
		content: '';
		position: absolute;
		left: 50%;
		transform: translate(-50%, 0);
		top: -16px;
		width: 0;
		height: 0;
		border-width: 8px;
		border-style: solid;
		border-color: transparent transparent #fff transparent;
	}

	.operaTionArea {
		margin-top: 20px;
		font-size: 14px;
		color: #666;
		border-bottom: 1px solid #F2F2F2
	}

	.CZOpenArea {
		height: 27px;
		overflow: hidden;
	}

	.OTA_title,
	.OTA_person {
		display: flex;
		justify-content: space-between;
		margin-bottom: 10px;
	}

	.OTA_typeBox {
		display: flex;
		margin-bottom: 10px;
	}

	.OTA_type {
		flex-wrap: wrap;
	}

	.OTA_type>ul>li {
		margin-bottom: 10px;
	}

	.OTA_typeBox>div:nth-child(1) {
		min-width: 105px;
		margin-right: 40px;
	}

	.OTA_typeBox>div:nth-child(1)::before {
		display: inline-block;
		content: '';
		width: 6px;
		height: 6px;
		background: rgba(216, 216, 216, 1);
		border-radius: 50%;
		margin-right: 10px;
	}

	.OTA_person {
		color: #999;
	}

	.OTA_title>li:nth-child(1) {
		color: #929BA8
	}

	.OTA_title>li:nth-child(2) {
		cursor: pointer;
		color: #337AB7
	}

	.OTA_mask {
		display: inline-block;
		width: 6px;
		height: 6px;
		border-radius: 50%;
		background: #D8D8D8
	}

	.bill_text {
		margin-right: 20px;
	}

	.bill_value {
		margin-right: 20px;
	}

	.bill_change {
		margin-right: 20px;
	}

	.bill_change>span:nth-child(1) {
		margin-right: 20px;
	}

	.OTA_type>ul:nth-child(1)>.bill_text:nth-child(1) {
		margin-right: 0
	}

	.OTA_span {
		color: #565E99;
		margin-right: 20px;
	}

	.bill_value span:nth-child(2),
	.bill_change span:nth-child(3),
	.bill_change span:nth-child(5) {
		color: #565E99
	}
</style>
<section id="carryOver" class="ml-24 mr-24 mb-20">
	<div class="bill-edit-head border-b pt-10 pb-10">应收账款-收款详情</div>
	<div class="bill-boxshadow">
		<div class="bill-due-to"><b class="icon-GM-bill"></b><span class="color-orange">账期 {{billData.beginDate | timestamp}}
				至 {{billData.endDate | timestamp}}</span></div>
	</div>
	<div class="bill-contract-content">
		<div class="clearfix">
			<h1 class="pull-left font-16" style="margin:0;line-height:34px;"><strong>结算信息</strong></h1>			
		</div>


		<div class="dy-flex">
			<div class="dy-fx-1">账单编号：<span class="ml-24">{{billData.no}}</div>
			<div class="dy-fx-1">账单类型：<span class="ml-24">{{billData.billTypeName || '--'}}</div>
			<div class="dy-fx-1"></div>
		</div>

		<div class="dy-flex" v-if=" billData.billTypeCode == 'C' || billData.billTypeCode == 'T' ">
			<div class="dy-fx-1">管理编号：<a :href="'#/contractNewDeatil?id='+idA.idb+'&ddtab=true'" class="ml-24">{{contractData.mCode}}</a></div>
			<div class="dy-fx-1">合同编号：<a :href="'#/contractNewDeatil?id='+idA.idb+'&ddtab=true'" class="ml-24">{{contractData.cCode}}</a></div>
			<div class="dy-fx-1">合同名称：<span class="ml-24">{{contractData.contractName ? contractData.contractName : '--'}}</span></div>
		</div>

		<div class="dy-flex" v-if=" billData.billTypeCode == 'YX' ||  billData.billTypeCode == 'YXTK' ">
			<div class="dy-fx-1">意向编号：<span class="ml-24">{{billData.intentCode}}</div>
		</div>
		<div class="dy-flex" v-if=" billData.billTypeCode == 'T' ">
			<div class="dy-fx-1">退租编号：<span class="ml-24">{{billData.withdrawCode}}</div>
		</div>

		<div class="bill-customer">客户：<span class="ml-24">{{contractData.zlfCompany || '--'}}</span></div>
		<div class="bill-as-of-date" v-if="!isEditCountMes">收款截止日：<span class="ml-24">{{billData.deadlineDate | timestamp}}</span></div>

		<div class="dy-flex line-height-34 mt-5 receiptDeadlineDate" v-if=" billData.billState == 'WTJ' && isEditCountMes">
			<div class="fl">收款截止日:</div>
			<div class="fl ml-24">
				<div style="width: 150px;">
					<web-calendar v-model="receiptDeadlineDate" @change="receiptDeadlineDateChange"></web-calendar>
				</div>
			</div>
		</div>

		<div class="bill-state">状态：
			<span class="ml-24 color-orange">
				<b>{{billData.paymentState | billState}}</b>
				<b class="ml-10 mr-10">{{billData.overdueState | billState}}</b>
				<b>{{billData.billState | billState}}</b>
			</span>
		</div>

	</div>

	<!-- 出租资源 -->
	<div class="rent-resource">
		<h3 class="font-16">出租资源</h3>
		<!-- 单元 -->
		<div v-if="building.length">
			<div class="clearfix line-height-34">
				<div class="pull-left">单元<span>({{Number(totalArea).toFixed(2)}}m²)</span></div>
				<div class="pull-right cursor" @click="checkDetailMes('unit')">
					<span style="color:#337ab7" v-if="!unitOpenFlag">展开详情</span>
					<span style="color:#337ab7" v-if="unitOpenFlag">收起详情</span>
					<img class="bill-close-image" src="assets/images/right.png" alt="" v-if="!unitOpenFlag">
					<img class="bill-open-image" src="assets/images/down.png" alt="" v-if="unitOpenFlag">
				</div>
			</div>
			<div class="unit-table" v-if="unitOpenFlag">
				<div class="tb-title dy-flex border-b gradient-color">
					<div class="dy-fx-2">项目</div>
					<div class="dy-fx-2">楼栋</div>
					<div class="dy-fx-1">楼层</div>
					<div class="dy-fx-4">单元</div>
				</div>
				<div class="tb-content">
					<ul class="dy-flex project-cr">
						<li class="dy-fx-2 project">{{contractData.projectName}}</li>
						<li class="dy-fx-7">
							<!-- 楼栋 -->
							<ul class="dy-flex building-cr" v-for="(item,index) in building">
								<li class="dy-fx-2 building">{{item.buildingName}}</li>
								<li class="dy-fx-5">
									<!-- 楼层 -->
									<ul class="dy-flex floor-cr" v-for="(item1,index1) in item.floor">
										<li class="dy-fx-1 floor">{{item1.floorName || '--'}}</li>
										<li class="dy-fx-4 unit">
											<!-- 单元 -->
											<b v-for="(item2,index2) in item1.unit" style="float:left">{{item2}}<i v-if="index2 + 1 !== item1.unit.length">、</i></b>
										</li>
									</ul>
								</li>
							</ul>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<!-- 工位 -->
		<div v-if="wp.length">
			<div class="clearfix line-height-34">
				<div class="pull-left">工位<span>({{wpTotalNum}}个)</span></div>
				<div class="pull-right cursor" @click="checkDetailMes('wp')">
					<span style="color:#337ab7" v-if="!wpOpenFlag">展开详情</span>
					<span style="color:#337ab7" v-if="wpOpenFlag">收起详情</span>
					<img class="bill-close-image" src="assets/images/right.png" alt="" v-if="!wpOpenFlag">
					<img class="bill-open-image" src="assets/images/down.png" alt="" v-if="wpOpenFlag">
				</div>
			</div>
			<div class="position-table border" v-if="wpOpenFlag">
				<div class="tb-title dy-flex border-b gradient-color">
					<div class="dy-fx-3">项目</div>
					<div class="dy-fx-3">楼栋</div>
					<div class="dy-fx-1">楼层</div>
					<div class="dy-fx-1">单元</div>
					<div class="dy-fx-1">工位数</div>
					<div class="position-item">工位</div>
				</div>
				<ul class="tb-content line-height-40">
					<li class="content-item dy-flex" v-for="(item,index) in wp" :buildingId="item.buildingId" :floorId="item.floorId"
					 :unitId="item.unitId">
						<div class="dy-fx-3">{{contractData.projectName}}</div>
						<div class="dy-fx-3">{{item.buildingName}}</div>
						<div class="dy-fx-1">{{item.floorName || '--'}}</div>
						<div class="dy-fx-1">{{item.unitName}}</div>
						<div class="dy-fx-1">{{item.positions.length}}</div>
						<div class="position-item">
							<span class="position">
								<b v-for="(item1,index1) in item.positions" style="float:left">{{item1.positionName}}<i v-if="index1 + 1 !== item.positions.length">、</i></b>
							</span>
						</div>
					</li>
				</ul>
			</div>
		</div>
		<!-- 车位 -->
		<div v-if="st.length">
			<div class="clearfix line-height-34">
				<div class="pull-left">车位<span>({{stTotalNum}}个)</span></div>
				<div class="pull-right cursor" @click="checkDetailMes('st')">
					<span style="color:#337ab7" v-if="!stOpenFlag">展开详情</span>
					<span style="color:#337ab7" v-if="stOpenFlag">收起详情</span>
					<img class="bill-close-image" src="assets/images/right.png" alt="" v-if="!stOpenFlag">
					<img class="bill-open-image" src="assets/images/down.png" alt="" v-if="stOpenFlag">
				</div>
			</div>
			<div class="position-table border" v-if="stOpenFlag">
				<div class="tb-title dy-flex border-b gradient-color">
					<div class="dy-fx-3">项目</div>
					<div class="dy-fx-3">楼栋</div>
					<div class="dy-fx-1">楼层</div>
					<div class="dy-fx-1">单元</div>
					<div class="dy-fx-1">车位数</div>
					<div class="position-item">车位</div>
				</div>
				<ul class="tb-content">
					<li class="content-item dy-flex" v-for="(item,index) in st" :buildingId="item.buildingId" :floorId="item.floorId"
					 :unitId="item.unitId">
						<div class="dy-fx-3">{{contractData.projectName}}</div>
						<div class="dy-fx-3">{{item.buildingName}}</div>
						<div class="dy-fx-1">{{item.floorName || '--'}}</div>
						<div class="dy-fx-1">{{item.unitName}}</div>
						<div class="dy-fx-1">{{item.positions.length}}</div>
						<div class="position-item">
							<span class="position">
								<b v-for="(item1,index1) in item.positions" style="float:left">{{item1.positionName}}<i v-if="index1 + 1 !== item.positions.length">、</i></b>
							</span>
						</div>
					</li>
				</ul>
			</div>
		</div>
	</div>


	<!-- 2019-05-22 start -->
	<div class="no-bb-expenditure">
		<h3 class="font-14 color-gray">未结清费项</h3>
		<div class="clearfix">
			<div class="pull-left mr-10 line-height-34">费项:</div>
			<div class="pull-left" style="width: 170px;">
				<div class="select-ul">
					<span class="select-name br-4 box-i-shadow" ref="expenditureHtml">请选择未结清费项</span>
					<ul>
						<li v-for="item in targetExpenseArr" @click="selectCarryOverExpense(item)">{{ item.name }}</li>
					</ul>
				</div>
			</div>
		</div>
		
		<div class="mt-15" v-if="targetExpenseSelect.amountTPay">
			<span class="color-999">待结转金额:</span>
			<span class="color-orange">{{ targetExpenseSelect.amountTPay | absNumber | formatNum }}</span>
			<span class="color-999">元</span>
			<span v-if="targetExpenseSelect.amountTPay < 0">(应退)</span>
			<span v-if="targetExpenseSelect.amountTPay > 0">(应收)</span>
		</div>
	</div>
	
	<div class="mt-15 br-4 border hover-carry-over" style="width: 592px;" v-for="(item, index) in sourceExpenseDisplaySelect">
		<div class="clearfix bg-f7f7f7 plr-12 line-height-40" style="color: #5e67a5;">
			<div class="pull-left">结转{{ index+1 }}</div>
			<div class="pull-right">
				<button type="button" class="icon-Gm-delete-2" @click="delCarryOver(index)" style="color: #5e67a5;border: 0;background: none;">
					<span class="ml-5">删除</span>
				</button>
			</div>
		</div>
		<div class="ptb-10 plr-10 clearfix">
			<div class="pull-left">
				<div>关联账单: <span>{{ item.source_bill_no }}</span></div>
				<div class="mt-10">结转费项: <span>{{ item.source_expense_name }}</span></div>
				<div class="mt-10">可结转金额: <span class="color-orange">{{ item.amount | formatNum }}</span></div>
				<div class="mt-10">
					<span>结转金额:</span>
					<input type="number" class="form-control inline ml-10" @blur="validateAmount(index)" style="width: 156px;" v-model="item.carry_over_amount">
				</div>
				<div class="mt-10 line-height-34">
					<span style="vertical-align: top;">结转时间:</span>
					<div class="inline ml-10" style="width: 156px;">
						<web-calendar v-model="item.carry_over_date" @change="validateTime(index)"></web-calendar>
					</div>
				</div>
			</div>
			<div class="pull-right">
				<p>备注:</p>
				<textarea class="form-control" style="height: 152px;width: 280px;" v-model="item.memo" placeholder="非必填"></textarea>
			</div>
		</div>
	</div>
	
	<button type="button" v-if="targetExpenseSelect.amountTPay" class="icon-Org-account mt-15" @click="addCarryOver" style="color: #5e67a5;border: 0;background: none;">
		<span class="ml-5">新增结转</span>
	</button>
	
	<div class="mt-15 pt-15">
		<div class="color-gray">结转结算</div>
		<div class="line-height-34">
			<span class="color-999">待结转金额:</span>
			<span class="color-orange" style="margin: 0 5px;">{{ targetExpenseSelect.amountTPay || '0' | absNumber | formatNum }}</span>
			<span class="color-999">元</span>
		</div>
		<div>
			<span class="color-999">此次结转金额:</span>
			<span class="color-orange" style="margin: 0 5px;">{{ totalAmountTpay | formatNum }}</span>
			<span class="color-999">元</span>
		</div>
		<button class="btn n-btn-primary mt-15" @click="querySubmit">确认结转</button>
	</div>

	<div class="max-outer z-999" v-if="isCarryOverDisplay">
		<div class="carry-over-content br-4">
			<div class="co-title font-16 line-height-45 text-center">新增结转</div>
			<div class="close icon-Gm-close absolute text-center font-14" @click="cancelExpense"></div>
			<div class="ptb-10 bg-f7f7f7 pl-24 pr-24">
				<div class="dy-flex line-height-34 relative">
					<span class="icon-Gm-search absolute" style="left: 10px; top: 11px;"></span>
					<input type="text" class="line form-control mr-10" style="width: 246px;text-indent: 20px;" v-model="keyword" placeholder="客户/合同名称/账单编号/管理编号">
					<button class="btn s-btn-default mr-10" @click="carryOverSearch">查询</button>
					<button class="btn s-btn-default" @click="carryOverReset">重置</button>
				</div>
				<div class="clearfix box-i-shadow bg-fff br-4 relative mt-10">
					<div class="text-hover-top" ref="widthCal" v-if="texthover" :style="{left:lefthover, top:tophover}">
						<ul class="unitHover">
							<li v-for="unit in rentUnits">{{ unit.projectName }}-{{unit.buildingName}}-{{unit.floorName}}-{{unit.unitName}}{{unit.positionName ? '-' + unit.positionName : ''}}</li>
						</ul>
					</div>
					<div class="co-scroll-x overflow" style="margin-right: 80px;">
						<table border="0" cellspacing="0" cellpadding="0">
							<tr class="color-gray">
								<th>选择</th>
								<th>客户名称</th>
								<th>项目</th>
								<th>租赁资源</th>
								<th>账单编号</th>
								<th>账期</th>
								<th>费项</th>
								<th>状态</th>
							</tr>
							<tr v-for="item in sourceExpenseArr">
								<td>
									<span class="hl-checkbox" :class="{active: sourceExpenseExpenseIds.indexOf(item.id) > -1}" @click="selectExpense(item)"></span>
								</td>
								<td>{{ item.customerName }}</td>								
								<td>{{ item.projectName }}</td>								
								<td @mouseenter="hoverText($event, item.buildingFloorUnitInfo)" @mouseleave="mouseleaveOut">
									<div v-for="(unit, index0) in item.buildingFloorUnitInfo" v-if="index0 == 0">{{ unit.projectName }}-{{unit.buildingName}}-{{unit.floorName}}-{{unit.unitName}}{{unit.positionName ? '-' + unit.positionName : ''}}</div>		
								</td>							
								<td>
									<a target="_blank" :href="'#/billDetail?id='+item.billId+'&aid='+item.contractId+'&page='+pageAs+'&ddtab=true'">{{ item.billNo }}</a>
								</td>								
								<td>{{ item.billBeginDate | timestamp }} 至 {{ item.billEndDate | timestamp }}</td>
								<td>{{ item.name }}</td>
								<td>{{ item.paymentStateVal }}</td>								
							</tr>
						</table>
					</div>
					<div class="absolute text-center border-r border-l overflow" style="right: 0;top: 0;width: 81px;">
						<div class="line-height-40 border-t color-gray">可结转金额</div>
						<div class="line-height-40 border-t color-orange" v-for="item in sourceExpenseArr">{{ item.amountTpay | formatNum }}</div>
					</div>					
				</div>
				<div class="text-center mt-10">
					<div class="clearfix inline">
						<ul class="page" id="page"></ul>
					</div>
				</div>
			</div>
			<div class="ptb-10 text-center">
				<button class="btn n-btn-primary mr-24" @click="queryExpense">确认</button>
				<button class="btn n-btn-outline" @click="cancelExpense">取消</button>
			</div>
		</div>
	</div>
	<!-- 2019-05-22 end -->
</section>

<style type="text/css">
	.max-outer {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,.5);
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.carry-over-content {
		background: #fff;
		width: 900px;
		position: relative;
	}
	.hover-carry-over:hover {
		border-color: #565E99;
	}
	.carry-over-content .close {
		width: 45px;
		line-height: 45px;
		right: 0;
		top: 0;
	}
	.co-scroll-x {
		overflow-x: scroll;		
	}
	.co-scroll-x table {
		width: 100%;
		margin-right: 80px;
	}
	.co-scroll-x table, .co-scroll-x table th, .co-scroll-x table td {
		border: 1px solid #ddd;
		border-collapse: collapse;
		white-space: nowrap;
	}
	.co-scroll-x table th, .co-scroll-x table td {
		padding: 0 8px !important;
		line-height: 40px !important;
		font-weight: 400;
	}
	
	.icon-Gm-calendar:before {
		top: 0;
		right: 0;
	}
	
	.text-hover-top {
		position: absolute;
		padding: 5px 15px;
		background-color: #fff;
		z-index: 9;
		color: #999;
		filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.2));
		border-radius: 4px;
		line-height: 24px;
		width: auto;
		white-space: nowrap;
	}
	
	.text-hover-top::before {
		content: '';
		position: absolute;
		left: 50%;
		top: -10px;
		width: 0;
		height: 0;
		border-width: 0 10px 10px;
		border-style: solid;
		border-color: transparent transparent #fff;
		transform: translate(-50%, 0);
	}
	.text-hover-top li {
		white-space: nowrap;
		line-height: 40px;
		border-bottom: 1px solid #ddd;
	}
	.text-hover-top li:last-child {
		border: none;
	}
</style>

<script src="modules/contract/scripts/contract_public.js" type="text/javascript" charset="utf-8"></script>
<script src="modules/bill/scripts/carryOver.js" charset="utf-8"></script>
